<template>
	<view class="register">
		<view class="logo">
			赤兔养车
		</view>
		<view class="title">
			新用户注册
		</view>
		<u-toast ref="showwrongregister" />
		<view class="container">
			<view class="item">
				<input type="text" value="" placeholder="请输入手机号" v-model="users.phoneNum" />
			</view>
			<view class="item">
				<input type="text" value="" placeholder="请输入验证码" v-model="users.code" />
				|
				<button class="yzm_btn" plain="true" @tap="getCode" v-if="isTap==false">
					&nbsp;&nbsp;获取验证码
				</button>
				<button class="yzm_btn" plain="true" @tap="getCode" v-if="isTap==true" disabled="true">
					&nbsp;&nbsp;{{time}}秒后重新获取
				</button>
			</view>
			<view class="item userpass">
				<input type="text" value="" placeholder="设置密码" v-model="users.password" password="true" />
			</view>
		</view>
		<!-- 	<button type="default" class="register_btn" @tap="tapRegister" v-if="isChecked==true">
			注册
		</button> -->
		<button type="default" class="register_btn" @tap="tapRegister" :disabled="!isChecked">
			注册
		</button>
		<view class="footer">
			<image src="../../static/icons/zjc/icon_select@2x.png" mode="" class="select" v-if="isChecked"
				@tap="setChecked"></image>
			<view class="select" v-else @tap="setChecked">
			</view>
			<text>注册代表同意</text><text style="color:#6b6bdf;">《移动账号服务与协议》</text><text>并授权</text><text
				style="color:#6b6bdf;">《赤兔用户协议》</text><text>和</text><text style="color:#6b6bdf;">《隐私协议》</text>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers("users");
	export default {
		data() {
			return {
				//是否同意协议
				isChecked: false,
				time: 30, //验证码重新发送倒计时
				isTap: false, //是否点击发送验证码
				//用户信息
				users: {
					phoneNum: "", //手机号
					code: "", //验证码
					password: "" //密码
				}
			}
		},
		methods: {
			//是否同意协议,同意之后才能进行注册
			setChecked() {
				this.isChecked = !this.isChecked;
			},
			...mapActions(["getusercode", "userRegister"]),
			...mapMutations(["setUserInfo"]),
			//点击获取验证码
			async getCode() {
				//判断手机号是否为空
				if (this.users.phoneNum) {
					await this.getusercode(this.users.phoneNum);
					this.isTap = !this.isTap
					//重新发送倒计时
					const timer = setInterval(() => {
						this.time--;
						if (this.time <= 0) {
							clearInterval(timer);
							this.isTap = !this.isTap
							this.time = 30;
						}
					}, 1000);
					//提示手机号不能为空
				} else {
					uni.showToast({
						title: "手机号不能为空!", //消息提示
						icon: "none",
						mask: true

					});
				}

			},
			//点击按钮进行注册
			async tapRegister() {
				const res = await this.userRegister(this.users);
				if (res.custom) {
					// 登录成功把id赋值给状态机
					this.setUserInfo(res.custom)
					uni.setStorageSync("token", res.token); //保存token到本地
					uni.setStorageSync("id", res.custom.id); //保存用户id到本地
					uni.switchTab({
						url: "../mine/mine" //注册成功后跳转到登录页面
					});
				} else {
					this.$refs.showwrongregister.show({
						title: '注册失败,请检查手机号或验证码是否正确', //消息提示
						type: 'error',
						position: "top"
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}

	.register .container {
		margin-bottom: 100rpx;
	}

	.register .logo {
		font-size: 48rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 60rpx;
		color: #f5610c;
		margin-bottom: 105rpx;
	}

	.register .title {
		font-size: 48rpx;
		color: #f5610c;
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.container .item {
		display: flex;
		width: 650rpx;
		height: 80rpx;
		margin: 0 auto;
		border-radius: 40rpx;
		background-color: #f5f5f5;
		line-height: 80rpx;
		padding: 0 30rpx;
		color: #cfcfcf;
		margin-top: 30rpx;
	}

	.item input {
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #000000;
	}

	.item input::placeholder {
		color: #000000;
	}

	.container .item .yzm_btn {
		width: 270rpx;
		color: #cfcfcf;
		border: 1rpx solid transprant;
		font-size: 24rpx;
		line-height: 80rpx;
		border: none;
	}

	.register .register_btn {
		width: 650rpx;
		height: 90rpx;
		background-color: #f5601C;
		color: #ffffff;
		margin: 0 auto;
		border-radius: 45rpx;
		border: 2rpx solid #abb08c;
		margin-bottom: 30rpx;
	}

	.register .footer {
		/* display: flex; */
		box-sizing: border-box;
		padding: 0 50rpx;
	}

	.footer .select {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #C1C1C1;
		display: inline-block;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.footer image {
		width: 35rpx;
		height: 35rpx;
	}
</style>
